<template>
  <view class="content" :style="bgStyle">
    <view class="block"></view>
    <view class="state" :style="stStyle">
      <up-text 
        align="center" 
        :size="24" 
        color="#020202" 
        :text="stateText"
      ></up-text>
    </view>
    <view class="tip" :style="tipStyle">
      <up-text 
        color="#676f74" 
        :text="tipText"
      ></up-text>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import type { StateProps } from './state.type';

export default defineComponent({
  props: {
    stateText: {
      type: String,
      required: true
    },
    tipText: {
      type: String,
      required: true
    },
    bgImage: {
      type: String,
      required: true
    },
    stateFlex: {
      type: Number,
      required: true
    },
    tipFlex: {
      type: Number,
      required: true
    }
  },
  setup(props: StateProps) {
    const bgStyle = computed(() => ({
      'background-image': `url(${props.bgImage})`
    }));

    const stStyle = computed(() => ({
      flex: props.stateFlex
    }));

    const tipStyle = computed(() => ({
      flex: props.tipFlex
    }));

    return {
      bgStyle,
      stStyle,
      tipStyle
    };
  }
});
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column; 
  justify-content: flex-end;
  height: 100%;
  border-radius: 20rpx; 
  align-items: center;
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: top center;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content:hover {
  transform: scale(1.05);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

.block { 
  flex: 4;
}

</style>
